<tbody>
<tr> 
	<td><h3>Liste des services</h3></td>
</tr>
<tr>    
    <!-- Feedback message zone -->
	<td><div id="message"></div></td>
</tr>
<tr>    
    <td><div id="tablecontent">
    	<table class="testgrid">
    	</table>
    </div></td>
</tr>
</tbody>


<script src="../EditableGrid/editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_charts.js" ></script>
		<link rel="stylesheet" href="../EditableGrid/editablegrid.css" type="text/css" media="screen"> 
       
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
               
		<script>
			// helper function to get path of a demo image
			function image(relativePath) {
				return "images/" + relativePath;
			}
		
			window.onload = function() {

				// this approach is interesting if you need to dynamically create data in Javascript 
				var metadata = [];
				metadata.push({ name: "code_service", label: "Code Service", datatype: "string", editable: false});
				metadata.push({ name: "libelle_service", label:"Libelle Service", datatype: "string", editable: true});
				metadata.push({ name: "code_famille", label: "Code Famille", datatype: "string", editable: true});
				metadata[2].values = {};
				// Itération Prestation 
				<?php foreach ( $enum_famille as $famille ) {?>
					<?php echo 'metadata[2].values["'.$famille['code_famille'].'"] = {"'.$famille['code_famille'].'":"'.$famille['code_famille'].'-'.$famille['libelle_famille'].'"};';?>
					
			   	<?php } ?>
				metadata.push({ name: "prix_unitaire_HT", label:"Prix unitaire HT", datatype: "double(€,2)", editable: true});
				metadata.push({ name: "taux_tva", label: "Taux TVA", datatype: "double(%,2)", editable: true});
				
				metadata.push({ name: "commentaire", label: "Commentaire", datatype: "string", editable: true});
				metadata.push({ name: "description", label: "Description", datatype: "string", editable: true});
				metadata.push({ name:"action", label:"", datatype:"html", bar:true, editable:false, values:null});
				var data = [];
				<?php $i=1 ; ?>
			    <?php foreach ( $listeService as $service ) {?>
					data.push({id: <?php echo $i ?>,
					 values: {"code_service": "<?php echo htmlentities($service['code_service'], ENT_QUOTES,"UTF-8") ?>",
					 "libelle_service":"<?php echo $service['libelle_service'] ?>",
					 "code_famille":"<?php echo htmlentities($service['code_famille'], ENT_QUOTES,"UTF-8") ?>",
					 "prix_unitaire_HT":"<?php echo htmlentities($service['prix_unitaire_HT'], ENT_QUOTES,"UTF-8") ?>",
					 "taux_tva":"<?php echo htmlentities($service['taux_tva'], ENT_QUOTES,"UTF-8") ?>",
					 
					 "commentaire":"<?php echo $service['commentaire'] ?>",
					 "description":"<?php echo $service['description'] ?>",
					 "action":""}});

					
					 <?php $i=$i+1 ; ?>
   				<?php } ?>
				
		editableGrid = new EditableGrid("ServicesGrid", {
				// called when the XML has been fully loaded 
			tableLoaded: function() { 

				// display a message
				_$("message").innerHTML = "<p class='ok'>Ready!</p>";
				// render the grid
				this.renderGrid("tablecontent", "testgrid");
			
			},				
			// Function de modification d'une valeur 
			modelChanged: function(rowIdx, colIdx, oldValue, newValue, row) {
						
			columnName = this.getColumnName(colIdx);
			code_service = this.getValueAt(rowIdx, editableGrid.getColumnIndex("code_service"));
					
			_$("message").innerHTML = "<p class='ok'>New value is '" + newValue + "'</p>";
			// Appel à la modification du service
			window.location = "espace_administration.php?onglet=administration&page=gestion_services&action=modification&updateId="+code_service+"&attribute="+columnName+"&value="+newValue;
			}
		});
		
		editableGrid.load({"metadata": metadata, "data": data});								
		
		// CellRenderer pour suppression d'un valeur
		editableGrid.setCellRenderer("action", new CellRenderer({render: function(cell, value) {
			// this action will remove the row, so first find the ID of the row containing this cell 
			confirmed = false;
			rowId = cell.rowIndex;
			code_service = editableGrid.getValueAt(rowId, editableGrid.getColumnIndex("code_service"));

			cell.innerHTML = "<a onclick=\"if (confirm('Etes vous sur de vouloir supprimer ce service ? ')) { editableGrid.remove(" + cell.rowIndex + "); window.location.href='espace_administration.php?onglet=administration&page=gestion_services&action=suppression&delId="+code_service +"';} \" style=\"cursor:pointer\">" +
			 "<img src=\"" + image("delete.png") + "\" border=\"0\" alt=\"supprimer\" title=\"Supprimer Service\"/></a>"; 
			 
		}})); 
		
		editableGrid.renderGrid("tablecontent", "testgrid");	
		} 
	</script>
